<script setup lang="ts">
import type { Directive, DirectiveBinding,VNode } from 'vue'
import Test5 from '@/components/DynamicCom/Test5.vue'
import{ref} from 'vue'

// const textTemp=ref('我是触发更新的文本')


// const permission=[
//   'administrator',
// ]
//
// //指令传递参数有el 指令相关包括传递的参数 修饰符 数据等  虚拟dom
// //指令鉴权
// // const vHasPer:Directive = {
// //   created(el,binding,vnode){
// //     // el.children[0].innerHTML='456'
// //     console.log(el,binding,vnode,'created')
// //     if(permission.includes(binding.value)){
// //       el.style.display='inline-block'
// //     }else{
// //       el.style.display='none'
// //     }
// //
// //   },
// //   beforeMount(el,binding,vnode,){
// //     console.log(el,binding,vnode,'beforeMount')
// //   },
// //   mounted(el,binding,vnode,){
// //     console.log(el,binding,vnode,'mounted')
// //   },
// //   updated(el,binding,vnode,){
// //     console.log(el,binding,vnode,'updated')
// //   },
// //   beforeUpdate(el,binding,vnode,){
// //     console.log(el,binding,vnode,'beforeUpdate')
// //   },
// //   beforeUnmount(el,binding,vnode,){
// //     console.log(el,binding,vnode,'beforeUnmount')
// //   },
// //   unmounted(el,binding,vnode,){
// //     console.log(el,binding,vnode,'unmounted')
// //   }
// // }
//
// const changeText=()=>{
//   textTemp.value=Math.floor(Math.random() * textTemp.value)
// }

const inputValue=ref('')
//去除前后空格


// 可拖拽
// const vDrag:Directive=(el:HTMLElement,binding:DirectiveBinding,vnode:VNode)=>{
//   console.log(binding,vnode)
//   // mounted(el:HTMLElement,binding:DirectiveBinding,vnode){
//     el.addEventListener('mousedown',(edown)=>{
//        console.log(edown,'mousedown');
//       const x=edown.clientX-el.offsetLeft;
//       const y=edown.clientY-el.offsetTop
//       const move=(e:MouseEvent)=>{
//         console.log(e,'mousemove');
//
//         el.style.top=e.clientY-y+'px';
//         el.style.left=e.clientX-x+'px';
//       }
//
//       document.addEventListener('mousemove',move)
//       document.addEventListener('mouseup',()=>{
//         document.removeEventListener('mousemove',move)
//       })
//     })
//
//   // }
// }



//图片懒加载  glob懒加载  globEager静态加载
// const imgList:Record<string, {default:string}>=import.meta.glob('@/assets/lazyLoadImages/*.*',{eager:true})
// const arrList=Object.keys(imgList)

// const vLazy:Directive<HTMLElement,string>=async(el,binding:DirectiveBinding)=>{
//
//  //设置默认显示的src
//   await import('@/assets/logo.svg').then(res=>{
//     el.src=res.default
//   });
//   //可以监听元素进入可视区的信息
//   const observer=new IntersectionObserver((entries)=>{
//     console.log(entries,'>>>')
//        if(entries[0].isIntersecting){
//           setTimeout(()=>{
//             el.src=binding.value
//             observer.unobserve(el)
//           },2000)
//        }
//      })
//      observer.observe(el)
// }

</script>

<template>
<div >
<!--  <button @click="changeText()">改变文本内容</button>-->
<!--  <text v-hasPer:info="{name:'xxxx'}">{{textTemp}}</text>-->
  <input type="text" v-self-trim="inputValue" placeholder="请输入" v-model="inputValue">
<!--  <div class="mySun" v-drag>我是可拖拽的元素</div>-->
<!--<div class="img-box" >-->
<!--  <img v-lazy="item" v-for="item in arrList" :key="item" />-->
<!--</div>-->
  <Test5></Test5>
</div>

</template>

<style scoped lang="scss">
.mySun{
  width:500px;
  height:200px;
  background: rgb(234, 250, 255);
  position:absolute;
}
.img-box{
  width:50%;
  height:100vh;
  overflow:auto;
  margin:0 auto;
  img{
    width:100%;
    height:100%;
    margin:10px;
    border:1px solid #2c3e50;
  }
}
</style>
